# Size Prop

<EpicVideo url="https://www.epicreact.dev/workshops/react-fundamentals/size-prop" />

👨‍💼 It's great that we're composing the `className`s and `style`s properly, but
wouldn't it be better if the users of our components didn't have to worry about
which class name to apply for a given effect? Or that a class name is involved
at all? I think it would be better if users of our component had a `size` prop
and our component took care of making the box that size.

In this step, try to make this API work:

```tsx
<Box size="small" style={{ backgroundColor: 'lightblue' }}>
	small lightblue box
</Box>
```

- You'll need 📜
  [TypeScript's intersection (&) operator](https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types)
